<template>
  <!-- 财务报表详情页 -->
  <div class="containerPage">
    <!-- <u-navbar title="报表详情" :bgColor="navbarClass.titleBgColor" @leftClick="backHome" :placeholder="true"> </u-navbar> -->
    <div class="content">
      <div v-if="!loadingHead">
        <div class="text1">{{ axhFinance.financeTitle }}</div>
        <div class="time2">提交时间:{{ dateFormat(axhFinance.createTime, 'yyyy-MM-dd hh:mm:ss') }}</div>
        <template v-if="queryData.from != 'financeDisclosure'">
          <!-- * 0 等待审核（蓝色）
        * 1 等待审核（灰色）
        * 2 已通过审核
        * 3 当前阶段已被驳回 -->
          <div class="stepsNav" v-if="findFinanceData.financeStatus != 4">
            <div class="stepItem" v-for="(item, index) in axhAuditFinanceLogVos" :key="index">
              <div class="stepNum">
                <div v-if="item.wait == 1" class="iconOrder state0"></div>
                <img v-if="item.wait == 2" src="@/static/image/webApp/stast1.png" />
                <img v-if="item.wait == 0" src="@/static/image/webApp/stast2.png" />
                <img v-if="item.wait == 3" src="@/static/image/webApp/stast3.png" />
                <template v-if="!(index + 1 == 3)">
                  <div
                    class="iconLine"
                    :class="{
                      state0: axhAuditFinanceLogVos[index + 1].wait != 1,
                    }"
                  ></div>
                </template>
              </div>
              <div class="stepCont">
                <div class="tit">{{ item.title }}</div>
                <p v-if="item.username">{{ item.username }}</p>
                <p v-if="item.createTime">{{ item.createTime }}</p>
              </div>
            </div>
          </div>
        </template>
        <div class="tips1" v-if="findFinanceData.turnDownMsg">*驳回原因:{{ findFinanceData.turnDownMsg }}</div>
        <div class="linePadding"></div>
        <div class="tableBox">
          <div class="title3">{{ axhFinance.areaType == 2 ? '科目余额表' : '资产负债表' }}</div>
          <div class="tips2">*蓝色字体可查看凭证</div>
        </div>
        <div class="tipsBox">
          <div class="tipLab">编制单位：{{ axhFinance.areaName }}</div>
          <div class="tipLab">报表年月：{{ dateFormat(axhFinance.createTime, 'yyyy-MM') }}</div>
          <!-- <div class="tipLab">单位：元</div> -->
          <div class="tipLab">凭证数：{{ findFinanceData.pzSize }}</div>
        </div>

        <div class="tipsAll" v-if="axhFinance.fbStatus">*红色背景区域是被修改的数据行</div>
        <div class="tabCont">
          <movable-area scale-area class="movable-area">
            <movable-view class="movable-view" :style="{ height: tabScrollHeight + 550 + 'px' }" direction="all" scale="true" scale-min="1" scale-max="4" :scale-value="scale">
              <!-- 表格社区（双表） -->
              <div class="tabScroll clearfix" v-if="axhFinance.areaType == 1">
                <table3 :tableType="1" :tableData="financeReports"></table3>
                <table3 :tableType="2" :tableData="financeReportsType2"></table3>
              </div>
              <!-- 表格村（单表） -->
              <div class="tabScroll clearfix" v-if="axhFinance.areaType == 2">
                <table3 :tableType="3" :tableData="financeReports"></table3>
              </div>
            </movable-view>
          </movable-area>
        </div>

        <!-- 财务审核 -->
        <div class="btnsFinan" v-if="queryData.from == 'financialreview'">
          <template v-if="queryData.from == 'financialreview'">
            <div class="btn error" v-if="btnRole.isTurn" @click="passFinanceTable(0)">驳回</div>
            <div class="btn success" v-if="btnRole.isSuccess" @click="passFinanceTable(1)">通过</div>
          </template>
        </div>

        <!-- 村社财务 -->
        <div class="btnsFinan" v-if="queryData.from == 'financialCommunity'">
          <template v-if="findFinanceData.financeStatus == 4">
            <div class="btn success" @click="sunmitFindFinan">提交</div>
          </template>
          <template v-else>
            <div v-if="financeAudId.length >= 2">
              <div class="btn error" v-if="financeAudId.indexOf(parseInt(journId)) != 0" @click="gotoSwitch(0)">上一个</div>
              <div class="btn success" v-if="financeAudId.indexOf(parseInt(journId)) != financeAudId.length - 1" @click="gotoSwitch(1)">下一个</div>
            </div>
          </template>
        </div>

        <!-- 财务公开 -->
        <div class="btnsFinan" v-if="queryData.from == 'financeDisclosure' && financeAudId.length >= 2">
          <div class="btn error" v-if="financeAudId.indexOf(parseInt(journId)) != 0" @click="gotoSwitch(0)">上一个</div>
          <div class="btn success" v-if="financeAudId.indexOf(parseInt(journId)) != financeAudId.length - 1" @click="gotoSwitch(1)">下一个</div>
        </div>
      </div>
      <div class="loading" v-if="loadingHead">
        <u-loading-icon textSize="18"></u-loading-icon>
      </div>

      <div style="width: 100%; height: 125rpx"></div>
    </div>
    <!-- 驳回意见弹出层 -->
    <!-- <u-popup mode="bottom" :show="popupShow" @close="popupShow = false"> -->
    <u-popup mode="center" :show="rejectShow" @close="rejectShow = false">
      <div class="examineBox">
        <div class="tit">驳回原因</div>
        <u--textarea v-model.trim="remarkInput" placeholder="请输入驳回原因" count :maxlength="100"></u--textarea>
        <div class="rejectBtns">
          <div class="btn cancel" @click="rejectShow = false">取消</div>
          <div class="btn submit" @click="passFinanceTable(3)">确定</div>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
import table3 from './table3.vue'
export default {
  components: {
    table3,
  },
  data() {
    return {
      queryData: {},
      journId: '',
      scale: 1,
      loadingHead: true,
      rejectShow: false,
      tabScrollHeight: 0,
      tabScrollWidth: 0,
      remarkInput: '',
      timeswi: null,
      financeAudId: [],
      findFinanceData: [],
      btnRole: {},
      axhAuditFinanceLogVos: [],
      axhFinance: {},
      financeReports: [],
      financeReportsType2: [],
    }
  },
  async onLoad(option) {
    await this.$onLaunched
    this.journId = option.id
    this.queryData = option
    this.getFindFinanceInformation()
    // 用于操作上一个下一个的id数组
    this.financeAudId = JSON.parse(uni.getStorageSync('financeAudId') || '[]')
    
    
  },
  methods: {
    getHeight() {
      let taht = this
      uni
        .createSelectorQuery()
        .in(this)
        .select('.tabScroll')
        .boundingClientRect((data) => {
          console.log(data.height)
          console.log(data.width)
          taht.tabScrollHeight = data.height
          taht.tabScrollWidth = data.width
        })
        .exec()
    },
    // 查询审核报表的详细信息
    getFindFinanceInformation() {
      this.loadingHead = true
      this.$https
        .post({
          url: '/axh/findFinanceInformation',
          data: {
            phoneAuth: 1,
            financeId: this.journId,
            isPhone: '1',
            isPublicEntr: this.queryData.from == 'financeDisclosure' ? 1 : '',
          },
        })
        .then((res) => {
          if (res && res.code == 200) {
            this.findFinanceData = res.result
            this.btnRole = res.result.btn
            this.axhAuditFinanceLogVos = res.result.axhAuditFinanceLogVos
            this.axhFinance = res.result.axhFinance
            this.financeReports = res.result.financeReports
            this.financeReportsType2 = res.result.financeReportsType2
            this.loadingHead = false
            this.$nextTick(() => {
              this.getHeight()
            })
          }
        })
    },
    // 确认提交
    sunmitFindFinan() {
      let that = this
      uni.showModal({
        title: '提示',
        content: '确定需要提交该财务报表审核吗？',
        success: function (res) {
          if (res.confirm) {
            that.$https
              .post({
                url: '/axh/submitFinance',
                data: { id: that.journId },
              })
              .then((res) => {
                if (res.code == 200) {
                  that.getFindFinanceInformation()
                  that.$u.toast('操作成功')
                }
              })
          }
        },
      })
    },
    gotoSwitch(faly) {
      if (this.timeswi) return
      // 一秒内重复点击无效
      this.timeswi = setTimeout(() => {
        clearTimeout(this.timeswi)
        this.timeswi = null
      }, 1000)
      let indx = this.financeAudId.indexOf(parseInt(this.journId))
      if (faly) {
        this.journId = this.financeAudId[indx + 1]
      } else {
        this.journId = this.financeAudId[indx - 1]
      }
      this.getFindFinanceInformation()
    },
    // 预览凭证
    seeAccessoryPho(item) {
      if (item) {
        let imageArr = item.split(',')
        uni.previewImage({
          current: 0, // 预览图片的下标
          urls: imageArr, // 预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
        })
      }
    },

    // 报表通过审核
    passFinanceTable(atype) {
      let that = this
      if (atype == 1) {
        // 通过按钮
        uni.showModal({
          title: '提示',
          content: '确认无误后点击确定将通过审核！',
          success: function (res) {
            if (res.confirm) {
              that.$https
                .post({
                  url: '/axh/auditFinance',
                  data: {
                    id: that.journId,
                    remark: '',
                    auditType: 1,
                    fb: that.axhFinance && that.axhFinance.fbStatus ? 1 : '',
                  },
                })
                .then((res) => {
                  if (res.code == 200) {
                    uni.showModal({
                      title: '审核成功',
                      content: '点击确定将返回财务审核列表页',
                      showCancel: false,
                      success: function (res) {
                        if (res.confirm) {
                          uni.redirectTo({
                            url: `/pageContent/finance/${that.queryData.from}`,
                          })
                        }
                      },
                    })
                  }
                })
            }
          },
        })
      } else {
        // 驳回按钮
        if (atype == 0) {
          that.remarkInput = ''
          that.rejectShow = !that.rejectShow
        }
        // 驳回原因窗口确认
        if (atype == 3) {
          if (that.remarkInput == '' || that.remarkInput.length <= 0) {
            that.$u.toast('驳回原因不能为空')
            return
          }
          that.rejectShow = false
          uni.showModal({
            title: '提示',
            content: '确定需要驳回该报表信息吗？',
            success: function (res) {
              if (res.confirm) {
                that.$https
                  .post({
                    url: '/axh/auditFinance',
                    data: {
                      id: that.journId,
                      remark: that.remarkInput,
                      auditType: 0,
                      fb: that.axhFinance && that.axhFinance.fbStatus ? 1 : '',
                    },
                  })
                  .then((res) => {
                    if (res.code == 200) {
                      // that.getFindFinanceInformation()
                      uni.showModal({
                        title: '驳回成功',
                        content: '点击确定后将返回财务审核列表页',
                        showCancel: false,
                        success: function (res) {
                          if (res.confirm) {
                            uni.redirectTo({
                              url: `/pageContent/finance/${that.queryData.from}`,
                            })
                            // let pages = getCurrentPages() // 获取页面栈
                            // let prePage = pages[pages.length - 2] //获取上一页
                            // prePage.$vm.needRefresh = true // 需要刷新
                            // wx.navigateBack({
                            //   delta: 1,
                            // })
                          }
                        },
                      })
                    }
                  })
              } else if (res.cancel) {
                that.rejectShow = true
              }
            },
          })
        }
      }
    },
    goBack() {
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="scss" scoped>
.content {
  padding: 24rpx 16rpx;
  .loading {
    width: 120rpx;
    margin: 0 auto;
    padding-top: 100px;
  }
  .text1 {
    color: #35353f;
    font-size: 32rpx;
    margin-bottom: 4rpx;
  }
  .time2 {
    font-size: 24rpx;
    color: #9e9e9e;
  }
  .stepsNav {
    display: flex;
    padding: 30rpx 0;
    // transform: translateX(0.3rpx);
    min-height: 150rpx;
    justify-content: center;
    .stepItem {
      width: 30%;
      .stepNum {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        img {
          width: 40rpx;
          height: 40rpx;
        }
        .iconLine {
          flex: 1;
          width: 0;
          border-bottom: 2px solid #d8d8d8;
        }
        .iconOrder {
          width: 40rpx;
          height: 40rpx;
          font-size: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #d8d8d8;
          border-radius: 50%;
        }
      }
      .stepCont {
        .tit {
          font-size: 24rpx;
          margin-bottom: 2px;
        }
        p {
          font-size: 22rpx;
          color: #a8a8a8;
        }
      }
    }
  }
  .tips1 {
    font-size: 22rpx;
    padding-bottom: 10rpx;
    margin-bottom: 24rpx;
    color: #f05e5e;
  }
  .linePadding {
    width: 718rpx;
    height: 1px;
    background-color: #d8d8d8;
    margin: 20rpx 0;
  }
  .tableBox {
    text-align: center;
    position: relative;
    margin-bottom: 16rpx;
    padding-top: 7rpx;
    .title3 {
      font-size: 30rpx;
    }
    .tips2 {
      position: absolute;
      top: 10rpx;
      right: 0;
      font-size: 22rpx;
      color: #2c83e4;
    }
  }
  .tipsBox {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12rpx;
    .tipLab {
      font-size: 22rpx;
    }
  }

  .tipsAll {
    color: #f73131;
    padding-top: 10rpx;
    font-size: 20rpx;
  }
  .tabCont {
    font-size: 20rpx;
    .tabScroll {
      width: 1420rpx;
      padding: 12rpx 0;
    }
  }
  .btnsFinan {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    padding: 0 16rpx;
    background-color: #fff;
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      border-radius: 4px;
      height: 76rpx;
      font-size: 30rpx;
      margin-right: 24rpx;
      margin: 24rpx 24rpx 24rpx 0;
      flex: 1;
      &:nth-last-child(1) {
        margin-right: 0;
      }
    }
    .error {
      background: #f05e5e;
    }
    .success {
      background: #2c83e4;
    }
  }
  .state0 {
    color: #2c83e4 !important;
    border-color: #2c83e4 !important;
  }
}
// 审核、提交、驳回弹窗
.examineBox {
  padding: 32rpx;
  width: 308px;
  height: 170px;
  .tit {
    text-align: center;
    font-size: 30rpx;
    margin-bottom: 16rpx;
  }
  .rejectBtns {
    display: flex;
    .btn {
      display: flex;
      flex: 1;
      height: 72rpx;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      box-sizing: border-box;
      border-radius: 4px;
      margin-top: 24rpx;
    }
    .cancel {
      border: 1px solid #999;
      margin-right: 48rpx;
    }
    .submit {
      color: #fff;
      background: #2c83e4;
    }
  }
}
.movable-area {
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: hidden;
  background-color: #fff;
}
.movable-view {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  height: 2000px;
  width: 1420rpx;
}
</style>
